<template>
  <div>
    <CPageLayout
      :headerConfig="headerConfig"
      v-bind="layoutProps"
      v-loading.fullscreen="loading"
      bodyWrapperStyle="background:#F3F7FB"
    >
      <template #headerLeftBtn>
        <el-button text type="primary" @click="handleEdit" v-btnPermission="'PCF_MODEL_EDIT'"
          >编辑产品信息</el-button
        >
      </template>
      <template #headerDesc>
        <div class="g-flex-start-center">
          <span>编码：{{ empty(modelDetail?.modelCode) }}</span>
          <el-divider direction="vertical"></el-divider>
          <span
            >核算标准：{{ modelDetail?.standard ? StandardMap[modelDetail.standard] : '-' }}</span
          >
          <el-divider direction="vertical"></el-divider>
          <span>核算年份：{{ empty(modelDetail?.accountYear) }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>产品产地：{{ empty(modelDetail?.manufactureCountry) }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>功能单位：{{ empty(modelDetail?.functionalUnit) }}</span>
        </div>
      </template>
      <template #headerRightBtn>
        <el-button type="default" v-if="activeStep !== 1" @click="handleChangeStep('prev')"
          >上一步</el-button
        >
        <el-button type="primary" v-if="activeStep === 1" @click="handleChangeStep('next')"
          >1/3 下一步</el-button
        >
        <el-button type="primary" v-if="activeStep === 2" @click="handleChangeStep('next')"
          >2/3 下一步</el-button
        >
        <el-button
          type="primary"
          :loading="calculateLoading"
          v-if="activeStep === 3"
          v-btnPermission="'PCF_MODEL_CALC'"
          @click="handleCalc"
          >3/3 重新核算</el-button
        >
      </template>
      <template #default>
        <component ref="stepRef" :is="contentComponent" v-if="contentComponent"></component>
      </template>
    </CPageLayout>
  </div>
</template>

<script lang="ts" setup name="ModelDetail">
import { ref, computed } from 'vue';
import StepOne from './components/StepOne/index.vue';
import StepTwo from './components/StepTwo/index.vue';
import StepThree from './components/StepThree/index.vue';
import { CPageLayout } from '@/components/CPageLayout';
import { useRoute, useRouter } from 'vue-router';
import { provide } from 'vue';
import { MODEL_DETAIL_ROOT, ModelDetailRootProvider } from './types';
import { empty } from '@/utils';
import { getModelDetail } from '@/apis/pcf/myModel/modelList';
import type { ModelDetailResult } from '@/apis/pcf/myModel/model/modelManage';
import { StandardMap } from '@/constants/enum';

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const stepRef = ref();
const modelNo = route.params.modelNo as string;
const { step } = route.query;
const modelDetail = ref<ModelDetailResult>();
const calculateLoading = ref(false); //
/**
 * 获取详情
 */
async function getData() {
  console.log('getData', modelNo);
  try {
    loading.value = true;
    modelDetail.value = await getModelDetail(modelNo);
    loading.value = false;
    if (step) {
      activeStep.value = (step as unknown as number) - 1;
      handleChangeStep('next');
    }
  } catch (error) {
    console.log('error', error);
    loading.value = false;
  }
}

getData();

const headerConfig = computed(() => {
  return {
    title: modelDetail.value?.modelName || '模型详情'
  };
});

const activeStep = ref(1);

const contentComponentMap = new Map([
  [1, { component: StepOne }],
  [2, { component: StepTwo }],
  [
    3,
    {
      component: StepThree,
      layoutProps: {
        multiBody: true
      }
    }
  ]
]);

// 动态组件 根据步骤变化
const contentComponent = computed(() => {
  return contentComponentMap.get(activeStep.value)?.component;
});

// layout的props参数 根据步骤变化
const layoutProps = computed(() => {
  return contentComponentMap.get(activeStep.value)?.layoutProps;
});

// 变更步骤
const handleChangeStep = (type: 'prev' | 'next') => {
  console.log('handleChangeStep', type, activeStep.value);
  let val = activeStep.value;
  if (type === 'prev' && val > 1) {
    activeStep.value--;
  } else if (type === 'next' && val < 3) {
    activeStep.value++;
  }
  // onChangeStep(val);
};
const handleEdit = () => {
  router.push(`/myModel/modelDetail?id=${modelNo}&type=${route.query.type}`);
};

const handleCalc = () => {
  stepRef.value?.handleCalc();
};

// NOTE 为详情页面提供全局参数
provide<ModelDetailRootProvider>(MODEL_DETAIL_ROOT, {
  modelNo,
  modelDetail,
  calculateLoading
});
</script>

<style lang="scss" scoped>
.c-page-layout__body__title {
  margin: 0 20px;
  width: calc(100% - 40px);
  height: 56px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f2f3f5;
  .body-title__text {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0a1f33;
    line-height: 22px;
  }
  .body-title__desc {
    margin-left: 16px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    line-height: 20px;
  }
}
.c-page-layout__body__content {
  padding: 16px 20px;
}
.body-content__main {
  padding: 16px;
  border-radius: 6px;
  background-color: #f3f7fb;
}
</style>
